<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tweet</title>
    <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="font-awesome/css/font-awesome.css">
    <script src="react/react.js"></script>
    <script src="react/JSXTransformer.js"></script>
    <style type="text/css">
        .container{width:720px;margin-top: 20px;}
        .btm_btn{width:150px;float: right;}
        .btm_btn_add_img{width: 140px;float: left;}
        .btm_btn_add_img i{font-size:20px;margin-top: 5px;margin-left: 10px;}
        .left_num{margin-top:5px;margin-left: 20px;}
    </style>
</head>
<body>

</body>
<script type="text/jsx">
    var TweetBox = React.createClass({
        getInitialState:function(){
            return {
                text: "",
                photoAdded: false
            };
        },
        handleChange: function(event) {
            this.setState({ text: event.target.value });
        },
        togglePhoto: function(event) {
            this.setState({ photoAdded: !this.state.photoAdded });
        },
        overflowAlert: function() {
            if (this.remainingCharacters() < 0) {
                var beforeOverflowText = this.state.text.substring(140 - 10, 140);
                var overflowText = this.state.text.substring(140);

                return (
                        <div className="alert alert-warning">
                            <strong>Oops! Too Long:</strong>
                            &nbsp;...{beforeOverflowText}
                            <strong className="bg-danger">{overflowText}</strong>
                        </div>
                );
            }
        },
        remainingCharacters: function() {
            if (this.state.photoAdded) {
                return 140 - 23 - this.state.text.length;
            } else {
                return 140 - this.state.text.length;
            }
        },
        render: function() {
            return (
                    <div className="container">
                        <div className="well clearfix">
                            { this.overflowAlert() }
                            <textarea rows="6" onChange={this.handleChange} className="form-control" placeholder="输入内容"></textarea>
                            <br/>
                            <div className="btm_btn_add_img">
                                <button className="btn btn-default pull-right"
                                        onClick={this.togglePhoto}>
                                    <i className="fa fa-image"></i>&nbsp;&nbsp;
                                    {this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }
                                </button>
                            </div>

                            <div className="btm_btn">
                                <span className="pull-left left_num">{ this.remainingCharacters() }字</span>
                                <button disabled={this.remainingCharacters() === 140} className="btn btn-primary pull-right"><i className="fa fa-paper-plane"></i> Tweet</button>
                            </div>
                            <br/>
                        </div>
                    </div>
            );
        }
    });
    React.render(
            <TweetBox />,
            document.body
    );
</script>
</html>